<template>
  <div>
    <div ref="paragraphContainer" class="paragraph">
      <div v-for="listitem in list">
        <div v-for="(row,index) in listitem.goods">
          <div class="tableBox">
            <table>
              <tr class="title">
                <th colspan="9">配货单</th>
              </tr>
              <tr class="table_title">
                <th colspan="2">单号:{{ listitem.order.orderSn }}</th>
                <th colspan="4">收货门店:{{ listitem.receiver.store }}</th>
                <th colspan="3" class="text-right">日期:{{ listitem.order.createTime }}</th>
              </tr>
              <tr class="table_title">
                <th colspan="2">联系人:{{ listitem.receiver.phoneNum }}</th>
                <th colspan="1">{{ listitem.receiver.address }}</th>
                <th colspan="3">电话:{{ listitem.receiver.phoneNum }}</th>
                <th colspan="3" class="text-right" />
              </tr>
              <tr class="table_title table_line">
                <th style="width: 50px">序号</th>
                <th style="width: 150px">货物编码</th>
                <th style="width: 230px">货物名称</th>
                <th style="width: 80px">规格</th>
                <th style="width: 40px">单位</th>
                <th style="width: 45px">数量</th>
                <th style="width: 40px">单价</th>
                <th style="width: 60px">销售金额</th>
                <th style="width: 55px">金额</th>
              </tr>
              <tr v-for="(item,indexs) in row" class="table_con table_line">
                <th>{{ indexs+1 }}</th>
                <th>{{ item.orderSn }}</th>
                <th class="rawName">{{ item.goodsName }}</th>
                <th>{{ item.specValues }}</th>
                <th>{{ item.unit }}</th>
                <th>{{ item.count }}</th>
                <th>{{ item.unitPrice }}</th>
                <th>{{ item.sellPrice }}</th>
                <th v-if="item.count!=null">{{ item.count * item.sellPrice }}</th>
                <th v-else />
              </tr>
              <tr class="table_title table_line">
                <th>备注</th>
                <th colspan="4" />
                <th>优惠:</th>
                <th>{{ listitem.order.totalPrice - listitem.order.payPrice}}</th>
                <th>支付:</th>
                <th>{{ listitem.order.payPrice }}</th>
              </tr>
              <tr class="table_title">
                <th colspan="2">配送人员:</th>
                <th colspan="4" />
                <th colspan="3">客服电话:(0535)2133060</th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import crudCargo from '@/api/freight/cargo'
import crudYcOrder from '@/api/order/assignOrder'
import { parseTime } from '@/utils/index'

export default {
  data() {
    return {
      barCodeBase64Str: '',
      list: [],
      indentSn: [],
      printTable: [],
      storeIndentDetails: [],
      //
      receiver: {},
      order: {},
      goods: []
    }
  },
  mounted: function() {
    const _t = this
    _t.indentSn = _t.$route.query.indentSn
    _t.printInfo(_t.indentSn)
  },
  methods: {
    printInfo(val) {
      const _t = this
      var lists = []
      var tem = []
      if (Array.isArray(val)) {
        tem = val
      } else {
        tem.push(val)
      }
      crudYcOrder.getPrintInfo(tem).then(res => {
        console.log(res)
        res.forEach((item, indexs) => {
          var arrTemp = []
          // _t.barCodeBase64Str = item.barCodeBase64Str;
          _t.receiver = item.receiver != null ? item.receiver : [] // 地址信息
          _t.order = item.order // 订单信息
          _t.goods = item.goods // sku信息
          _t.order.createTime = `${parseTime(item.order.createTime, '{y}-{m}-{d}')}`
          // _t.order.create_time = `${parseTime(item.order.createTime, '{y}-{m}-{d}')}`;
          let index = 0
          const sectionCount = 5
          let temp = 0
          let length = 0
          for (let i = 0; i < _t.goods.length; i++) {
            length = _t.goods.length
            temp = parseInt(_t.goods.length / sectionCount)
            index = parseInt(i / sectionCount)
            if (arrTemp.length <= index) {
              arrTemp.push([])
            }
            arrTemp[index].push(_t.goods[i])
          }
          if ((length - sectionCount * temp) != 0) {
            for (let j = (length - sectionCount * temp); j < sectionCount; j++) {
              arrTemp[temp].push([])
            }
          }
          _t.printTable = arrTemp
          console.log('arrTemp========')
          console.log(arrTemp)
          console.log('arrTemp========')
          lists.push({ 'receiver': _t.receiver, 'order': _t.order, 'goods': arrTemp })
        })
        console.log('list========')
        _t.list = lists
        console.log(_t.list)
        console.log('list========')
        _t.printLoading = false
      })
    },
    printT() {
      Print(this.$refs.paragraphContainer)
    }
  }
}
</script>

<style scoped>
  .paragraph {
    font-family: SimSun;
    color: #0000FF;
  }

  .text-right {
    text-align: right;
  }

  .tableBox {
    //margin: 0 auto;
    width: 755px;
    height: 351px;
    padding-top: 4px;
    font-size: 14px;
   //border-style: solid solid none none;
  }

  .border_top {
    border: 1px solid #0000FF;
    border-style: solid solid none none;
  }

  .border_right {
    border: 1px solid #0000FF;
    border-style: solid solid solid solid !important;
  }

  .tableBox .title {
    text-align: center !important;
    font-size: 16px;
    height: 25px;
    border-style: none none none none !important;
  }

  .tableBox .title th {
    padding: 0;
  }

  .tableBox table {
    border-collapse: collapse;
  }

  .tableBox table th {
    height: 22px;
    padding: 0 0 0 4px;
  }

  .tableBox .table_line th {
    border: 1px solid #0000FF !important;
    //border-style: none none solid solid;
  }

  .tableBox .table_title {
    text-align: left;
    font-size: 12px;
    font-weight: normal !important;
  }

  .tableBox .table_con {
    height: 38px;
    text-align: left;
    font-size: 14px;
    font-weight: normal !important;
  }

  .tableBox .table_con .rawName {
    font-size: 16px !important;
  }

  .table_footer {
    font-size: 12px;
  }

  .table_footer th {
    height: 22px !important;
  }

  .font-16 {
    font-size: 16px !important;
  }

  .font-14 {
    font-size: 14px !important;
  }

  .font-12 {
    font-size: 12px !important;
  }

  .underline {
    text-decoration: underline;
  }
</style>
